<template>
  <div id="invitationorder">
    <amap></amap>
    <div class="invitationOrderBottom_box">
      <div class="invitation_information">
        <div class="driver_box">
          <div class="driver_photo">
            <p>
              <img :src="driver_photoImg" />
              <span>{{
                getHitchInvitationOrderData
                  ? getHitchInvitationOrderData.driverTitle
                  : ''
              }}</span>
            </p>
          </div>
          <div class="driver_car">
            <p>
              <span class="car-number">{{
                getHitchInvitationOrderData
                  ? getHitchInvitationOrderData.plate
                  : ''
              }}</span>
              <span class="car_type"
                >{{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.carColour
                    : ''
                }}.{{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.carBrandModel
                    : ''
                }}</span
              >
            </p>
            <p>
              <span class="driver-name">{{
                getHitchInvitationOrderData
                  ? getHitchInvitationOrderData.driverNickName
                  : ''
              }}</span>
              <span class="stars">
                <i class="active"></i>
              </span>
              <span class="dirver-score">{{ starsNumber }}</span>
              <span class="dirver_number"
                >{{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.driverReceiptNumber
                    : ''
                }}单</span
              >
            </p>
          </div>
          <div class="driver_phone">
            <span @click="callDriver">
              <img src="@/assets/imgs/phone_ico.png" />
            </span>
          </div>
        </div>
        <div style="clear:both"></div>
        <div>
          <div class="Colleague_per" v-if="sameUsers">
            <ul>
              <li>
                <p>
                  已接到
                  <span
                    >{{
                      getHitchInvitationOrderData
                        ? getHitchInvitationOrderData.otherNum
                        : ''
                    }}位</span
                  >乘客
                </p>
              </li>
            </ul>
          </div>
          <div v-else class="colleague_no">
            <p>
              <img src="@/assets/imgs/chixuxunzhao_icon.png" class="Rotation" />
              持续寻找乘客中…
            </p>
          </div>
        </div>
        <div style="clear:both"></div>
        <div class="orderinformation_box">
          <ul class="orderinformation_list">
            <li>
              <md-icon
                name="snkc_xcqx_time"
                slot="left"
                class="snkc_xcqx_time"
              ></md-icon>
              <span>{{ getReserveTime }}出发</span>
              <em>{{
                getHitchInvitationOrderData
                  ? getHitchInvitationOrderData.allotRemark
                  : ''
              }}</em>
            </li>
            <li>
              <md-icon
                name="shangchedian"
                slot="left"
                class="shangchedian"
              ></md-icon>
              <span
                >{{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.originCity
                    : ''
                }}
                {{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.originShortAddress
                    : ''
                }}
                {{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.originDistance
                    : ''
                }}米</span
              >
            </li>
            <li>
              <md-icon
                name="xiachedian"
                slot="left"
                class="shangchedian"
              ></md-icon>
              <span
                >{{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.destCity
                    : ''
                }}
                {{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.destShortAddress
                    : ''
                }}
                {{
                  getHitchInvitationOrderData
                    ? getHitchInvitationOrderData.destDistance
                    : ''
                }}米</span
              >
            </li>
          </ul>
        </div>
        <!--邀请司机接单状态-->
        <div v-if="invitationDriverOrder">
          <div
            class="invitation_btn"
            v-if="invitationDriver"
            @click="invitationBtn"
          >
            <p>邀请接单</p>
          </div>
          <div class="invitation_btn" v-else>
            <h6>司机确认中...</h6>
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/kefu_icon.svg';
import '@/assets/svgs/quxiao_icon.svg';
import '@/assets/svgs/wenxintishi_icon.svg';
import {
  Tabs,
  Icon,
  Toast,
  Dialog,
  Popup,
  PopupTitleBar,
  Picker,
  NumberKeyboard
} from 'mand-mobile';
import Loading from '@/components/loading';
import TopBar from '@/components/TopBar';
import MapTool from '@/components/map/MapTool';
import { Base64 } from 'js-base64';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
const hitch_pay_status = 'CALLED_PAY';
const hitch_pay_orderno = 'ORDER_NO';
// var Vconsole = require('vconsole');
// var cons = new Vconsole();
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [TopBar.name]: TopBar,
    [MapTool.name]: MapTool,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker,
    [NumberKeyboard.name]: NumberKeyboard
  },
  data() {
    return {
      title: '邀请接单',
      driver_photoImg: '',
      starsNumber: '',
      sameUsers: false, // 是否有同行乘客
      invitationDriverOrder: true, //邀请司机接单状态
      invitationDriver: true // 邀请确认状态
    };
  },
  created() {
    this.driver_photoImg = require('@/assets/imgs/snyc_tx.png');
  },
  mounted() {
    // 获取邀请车主行程详情
    this.getInvitationOrder(true);
  },
  methods: {
    ...mapActions(['getHitchInvitationOrderInfo', 'sendInvitationOrderInfo']),
    // 获取邀请车主行程详情
    getInvitationOrder() {
      if (this.$route.query.allotid) {
        let parm = {
          orderNo: this.$route.query.orderno,
          allotId: this.$route.query.allotid
        };
        this.getHitchInvitationOrderInfo(parm).then(() => {
          Loading.hide();
          console.log(this.getHitchInvitationOrderData);
          // 司机头像
          this.driver_photoImg = this.getHitchInvitationOrderData.driverHeadPhoto;
          // 是否有同行乘客
          if (
            this.getHitchInvitationOrderData.otherNum === '' ||
            this.getHitchInvitationOrderData.otherNum === '0'
          ) {
            this.sameUsers = false;
          } else {
            this.sameUsers = true;
          }
          // 司机星级
          if (this.getHitchInvitationOrderData.driverCreditScore) {
            this.starsNumber = this.getHitchInvitationOrderData.driverCreditScore;
          } else {
            this.starsNumber = '100';
          }
          // inviteType:1:乘客邀请司机，2：司机邀请乘客
          if (this.getHitchInvitationOrderData.inviteType === '1') {
            if (this.getHitchInvitationOrderData.inviteStatus === '4') {
              // 0：默认1：车主确认中 2：司机同意 3：司机拒绝 4：乘客确认中 5：乘客同意 6：乘客拒绝7：乘客已支付
              this.$router.replace({
                name: 'hitchColleagueOrder',
                query: {
                  orderno: this.$route.query.orderno
                }
              });
            } else if (this.getHitchInvitationOrderData.inviteStatus === '1') {
              this.invitationDriver = false;
            }
          } else {
            if (this.getHitchInvitationOrderData.inviteStatus === '4') {
              Dialog.confirm({
                icon: 'wenxintishi_icon',
                title: '遇到了顺路车主',
                content:
                  this.getHitchInvitationOrderData.driverNickName +
                  '司机邀请您同行',
                confirmText: '去支付',
                onConfirm: () => {
                  this.$router.replace({
                    name: 'hitchColleagueOrder',
                    query: {
                      orderno: this.$route.query.orderno
                    }
                  });
                }
              });
            }
          }
        });
      } else {
        Dialog.alert({
          title: '提示',
          content: '获取不到行程id',
          confirmText: '确定'
        });
      }
    },
    // 联系司机
    callDriver() {
      Toast({
        content: this.getHitchInvitationOrderData.driverPhone,
        duration: 3000,
        hasMask: true
      });
      return false;
    },
    // 邀请接单
    invitationBtn() {
      let parm = {
        orderNo: this.$route.query.orderno,
        allotId: this.$route.query.allotid
      };
      this.sendInvitationOrderInfo(parm).then(() => {
        this.invitationDriver = false;
        // 发送邀请等待司机答复
        this.getInvitationOrder();
      });
    }
  },
  computed: {
    ...mapGetters(['getHitchInvitationOrderData']),
    getReserveTime() {
      let str = this.getHitchInvitationOrderData;
      if (!str) {
        return '';
      }
      let momstart = moment(this.getHitchInvitationOrderData.reserveTime, 'x');
      let travelTimeStr = momstart.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'dddd HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: '[上] ddd HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return travelTimeStr;
    }
  }
};
</script>

<style lang="stylus">
#invitationorder {
  p, h6 {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .invitationOrderBottom_box {
    position: absolute;
    bottom: 20px;
    z-index: 1001;
    width: 100%;
  }

  .invitation_information {
    background-color: #fff;
    border-radius: 10px;
    margin: 0px 20px;
  }

  .driver_box {
    padding: 20px 30px;
  }

  .driver_photo {
    float: left;
  }

  .driver_photo p {
    position: relative;
  }

  .driver_photo p span {
    position: absolute;
    bottom: 0px;
    left: -5px;
    background-color: #6E6E6E;
    color: #fff;
    font-size: 24px;
    padding: 2px 2px;
    display: inline-block;
    width: 100px;
    text-align: center;
  }

  .driver_photo p img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .super_driver {
    position: absolute;
    bottom: -20px;
    left: -7px;
    z-index: 10;
    font-size: 18px;
    color: #fff;
    background-color: #6E6E6E;
    width: 100%;
    padding: 2px 5px;
  }

  .driver_car {
    float: left;
  }

  .driver_car p {
    margin-top: 10px;
    margin-left: 24px;
  }

  .driver-name {
    font-size: 30px;
    color: #333;
  }

  .stars {
    margin-left: 16px;
  }

  .stars i {
    display: inline-block;
    width: 24px;
    height: 22px;
    background: url('../../assets/imgs/xcxq_icon_xing_dark@2x.png') no-repeat center center;
    background-size: 24px 22px;
  }

  .stars i.active {
    background-image: url('../../assets/imgs/wf.png');
  }

  .dirver-score {
    font-size: 26px;
    color: #666;
    margin-left: 5px;
  }

  .dirver_number {
    font-size: 26px;
    color: #666;
    margin-left: 20px;
  }

  .car-number {
    font-size: 26px;
    color: #666;
  }

  .car_type {
    font-size: 26px;
    color: #666;
    margin-left: 20px;
  }

  .driver_phone {
    float: right;
    margin-top: 28px;
  }

  .driver_phone span {
    margin-left: 10px;
  }

  .driver_phone span img {
    width: 44px;
    height: 44px;
  }

  .Colleague_per {
    border-top: solid 1px #E0E0E0;
    margin-top: 20px;
    padding: 0px 30px;
  }

  .Colleague_per ul li {
    float: left;
    margin-top: 26px;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .Colleague_per ul li p {
    font-size: 24px;
    color: #666;
  }

  .Colleague_per ul li p span {
    color: #FF6917;
  }

  .colleague_no {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 30px;
  }

  .colleague_no p {
    height: 65px;
    line-height: 65px;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .colleague_no p img {
    width: 24px;
    height: 24px;
    position: relative;
    top: 4px;
    right: 8px;
  }

  @keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(360deg);
    }
  }

  .Rotation {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }

  .orderinformation_box {
    border-top: solid 1px #E0E0E0;
    margin-top: 10px;
  }

  .orderinformation_list {
    padding-top: 20px;
    position: relative;
  }

  .orderinformation_list li {
    margin: 0px 30px;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .orderinformation_list li span {
  }

  .orderinformation_list li em {
    font-size: 20px;
    color: #999;
    border: solid 1px #E0E0E0;
    padding: 4px 10px;
    margin-left: 20px;
    font-style: normal;
    border-radius: 6px;
    position: relative;
    bottom: 3px;
  }

  .snkc_xcqx_time {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 1px;
  }

  .shangchedian {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 3px;
  }

  .invitation_btn {
    margin: 20px 20px 0px 20px;
    padding-bottom: 20px;
  }

  .invitation_btn p {
    height: 98px;
    background: rgba(255, 105, 23, 1);
    border-radius: 10px;
    line-height: 98px;
    color: #fff;
    font-size: 36px;
    text-align: center;
  }

  .invitation_btn h6 {
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    text-align: center;
    color: #333;
    font-weight: 400;
  }

  .passenger_box {
    border-top: solid 1px #E0E0E0;
    margin-top: 30px;
  }

  .passenger_time {
    text-align: center;
    font-size: 36px;
    margin-top: 28px;
    color: #666;
  }

  .passenger_time span {
    color: #FF6917;
  }

  .passenger_box_list {
    padding: 20px;
  }

  .passenger_box_list_left {
    float: left;
    margin-top: 10px;
  }

  .passenger_box_list_left h6 {
    font-weight: 400;
    font-size: 26px;
    color: #666;
  }

  .passenger_box_list_left p {
    font-size: 20px;
    color: #999;
  }

  .passenger_box_list_left p span {
    color: #FF6917;
  }

  .passenger_box_list_center {
    float: left;
    width: 210px;
    height: 80px;
    background: rgba(255, 105, 23, 1);
    border-radius: 6px;
    color: #fff;
    margin-left: 50px;
  }

  .passenger_box_list_center h6 {
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    margin-top: 10px;
  }

  .passenger_box_list_center p {
    font-size: 24px;
    text-align: center;
  }

  .passenger_box_list_right {
    float: right;
    width: 160px;
    height: 80px;
    background: rgba(178, 178, 178, 1);
    border-radius: 6px;
    line-height: 80px;
  }

  .passenger_box_list_right p {
    font-size: 30px;
    color: #fff;
    text-align: center;
  }

  .orderinformation_bottom {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 100px;
  }

  .orderinformation_bottom ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .orderinformation_bottom ul li {
    margin-top: 30px;
    font-size: 24px;
    color: #666;
    padding-bottom: 30px;
  }

  .quxiao_icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
    margin-right: 8px;
  }

  .taxiPayType {
    background-color: #fff;
  }

  .pay_box {
    background-color: #fff;
    height: 550px;
    padding-top: 20px;
  }

  .taxiPayAlt_hd {
    text-align: center;
    padding-top: 30px;
    font-size: 24px;
    color: #333;
  }

  .taxiPayAlt {
    text-align: center;
    padding-top: 10px;
    font-size: 24px;
    color: #333;
  }

  .taxiPayAlt span {
    font-size: 40px;
  }

  .city_pay {
    font-size: 26px;
    color: #333;
    padding: 20px 30px 0px 30px;
    border-top: solid 1px #E0E0E0;
  }

  .city_pay span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .invition_hd {
    font-size: 36px;
    color: #333;
    padding: 20px 30px;
  }

  .invition_hd_text {
    font-size: 20px;
    color: #666;
    padding: 0px 30px 20px 30px;
  }

  .city_coupom {
    height: 68px;
    line-height: 68px;
    font-size: 26px;
    color: #333;
    padding: 0px 30px;
  }

  .city_coupom span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .taxiPayDetail {
    text-align: center;
    font-size: 24px;
    color: #999;
    margin-top: 20px;
  }

  .choice-payment-method li {
    padding: 0px 30px;
    font-size: 26px;
    color: #666;
    line-height: 88px;
    height: 88px;
    border-bottom: #e0e0e0 solid 1px;
  }

  .choice-payment-method li img {
    width: 44px;
    height: 44px;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li span {
    margin-left: 20px;
  }

  .choice-payment-method li b {
    float: right;
    color: #999999;
    font-weight: 400;
  }

  .choice-payment-method li b em {
    margin-right: 10px;
    font-style: normal;
  }

  .choice-payment-right {
    display: inline-block;
    background-color: #fff;
    width: 36px;
    height: 36px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li b .active {
    background: url('../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
    background-size: contain;
    border-color: #fff;
    width: 36px;
    height: 36px;
  }

  .taxi_pay {
    background-color: #ff6917;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
  }

  .keyBoardShow {
    height: 600px;
    background-color: #fff;
  }

  .paypwd_box {
    height: 110px;
    border-radius: 10px;
    border: 1px solid #979797;
    margin: 0px 30px;
  }

  .paypwd_box li {
    float: left;
    border-right: solid 1px #979797;
    width: 112px;
    height: 110px;
  }

  .paypwd_box li:nth-of-type(6) {
    border-right: none;
  }

  .paypwd_box li span {
    height: 28px;
    width: 28px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 40px;
    left: 40px;
  }
}
</style>
